<template>
    <div @click="handler1">handler1</div>
    <div @click="handler2(1, 2)">handler2</div>
    <div @click="handler3($event, 3, 4)">handler3</div>
    <!-- 阻止冒泡 -->
    <div class="father" @click="handler4">
        <div class="son" @click.stop="handler5"></div>
    </div>
    <!-- 阻止事件发生 -->
    <a href="https://baidu.com" @click.prevent="handler6">百度</a>
</template>

<script setup>
const handler1 = (event) => {
    console.log(event)
}
const handler2 = (a, b) => {
    console.log(a,b)
}
const handler3 = (event, c, d) => {
    console.log(event)
    console.log(c, d)
}
const handler4 = () => {
    console.log('father')
}
const handler5 = () => {
    console.log('son')
}
</script>
<style scoped>
.father {
    height: 100px;
    width: 100px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.son {
    height: 50px;
    width: 50px;
    border: 2px solid black;
}
</style>
